<template>
  <div id="app">
    <div class="slider-container">
      <input
        type="range"
        min="0"
        max="100"
        v-model="sliderValue"
        class="slider"
        @input="updateGradient"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderValue: 50, // 初始滑块值
    };
  },
  methods: {
    updateGradient() {
      const value = (this.sliderValue - 0) / (100 - 0) * 100;
      this.$refs.slider.style.setProperty('--value', value + '%');
    },
  },
  mounted() {
    this.updateGradient(); // 初始化时更新背景
  },
};
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.slider-container {
  position: relative;
  height: 300px; /* 滑块容器的高度 */
}

.slider {
  -webkit-appearance: slider-vertical; /* Safari */
  width: 10px; /* 滑块的宽度 */
  height: 100%; /* 滑块的高度 */
  background: transparent; /* 背景透明 */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; /* 滑块的圆点宽度 */
  height: 20px; /* 滑块的圆点高度 */
  background: #007bff; /* 滑块的颜色 */
  cursor: pointer;
  border-radius: 50%; /* 圆形滑块 */
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  cursor: pointer;
  border-radius: 50%;
}

/* 自定义轨道 */
.slider::-webkit-slider-runnable-track {
  height: 100%;
  background: linear-gradient(to top, #007bff 0%, #007bff var(--value), #ddd var(--value), #ddd 100%);
}

.slider::-moz-range-track {
  height: 100%;
  background: linear-gradient(to top, #007bff 0%, #007bff var(--value), #ddd var(--value), #ddd 100%);
}

.slider::-ms-track {
  height: 100%;
  background: linear-gradient(to top, #007bff 0%, #007bff var(--value), #ddd var(--value), #ddd 100%);
  border: none;
  color: transparent;
}
</style>